<template>
    <div>
        <el-table :data="tableData" :span-method="spanMethod" border stripe fit style="width: 70%; margin-top: 10px" table-layout="auto">
            <el-table-column prop="付款周期" label="付款周期" width="180" />
            <el-table-column prop="套餐名称" label="套餐名称" />
            <el-table-column prop="vip等级" label="vip等级" />
            <el-table-column prop="价格" label="价格" />
            <el-table-column prop="流量" label="流量" />
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'

interface User {
    付款周期: string
    套餐名称: string
    vip等级: string
    价格: number
    流量: string
}

const tableData: User[] = [
    { 付款周期: '2年付', 套餐名称: '小流量2年付', vip等级: '6', 价格: 350, 流量: '400' },
    { 付款周期: '年付', 套餐名称: '个人小流量', vip等级: '5', 价格: 180, 流量: '200' },
    { 付款周期: '年付', 套餐名称: '个人标准版', vip等级: '5', 价格: 239.99, 流量: '2500' },
    { 付款周期: '年付', 套餐名称: '个人增强版', vip等级: '6', 价格: 349.99, 流量: '3584' },
    { 付款周期: '年付', 套餐名称: '个人行业版', vip等级: '6', 价格: 449.99, 流量: '4500' },
    { 付款周期: '年付', 套餐名称: '家庭标准版', vip等级: '6', 价格: 599.99, 流量: '9000' },
    { 付款周期: '年付', 套餐名称: '小微企业标准版', vip等级: '6', 价格: 3499.99, 流量: '35000' },
    { 付款周期: '年付', 套餐名称: '企业专线10Mbps', vip等级: '~', 价格: 16888, 流量: '无限' },
    { 付款周期: '季付', 套餐名称: '个人标准版', vip等级: '5', 价格: 69.99, 流量: '768' },
    { 付款周期: '季付', 套餐名称: '个人小流量', vip等级: '5', 价格: 14.99, 流量: '16' },
    { 付款周期: '月付', 套餐名称: '个人标准版', vip等级: '5', 价格: 24.99, 流量: '204.8' },
    { 付款周期: '月付', 套餐名称: '个人增强版', vip等级: '6', 价格: 34.99, 流量: '307.2' },
    { 付款周期: '月付', 套餐名称: '个人行业版', vip等级: '6', 价格: 44.99, 流量: '512' },
    { 付款周期: '月付', 套餐名称: '家庭标准版', vip等级: '6', 价格: 149.99, 流量: '1500' },
    { 付款周期: '月付', 套餐名称: '企业专线100Mbps', vip等级: '~', 价格: 158888, 流量: '无限' }
]

const spanList = [1, 7, 0, 0, 0, 0, 0, 0, 2, 0, 5, 0, 0, 0, 0]  // 用于指定rowspan

interface SpanMethodProps {
    row: User
    column: TableColumnCtx<User>
    rowIndex: number
    columnIndex: number
}

const spanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}: SpanMethodProps) => {
    if (columnIndex === 0) {
        return {
            rowspan: spanList[rowIndex],
            colspan: 1
        }
    }
}



</script>